<template>
  <div class="chat-message" :class="messageClass">
    <!-- 头像 -->
    <div class="chat-message__avatar">
      <div v-if="message.type === 'user'" class="avatar avatar--user">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </svg>
      </div>
      <div v-else class="avatar avatar--bot">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.9 1 3 1.9 3 3V7C3 8.1 3.9 9 5 9H8V11C8 12.1 8.9 13 10 13H14C15.1 13 16 12.1 16 11V9H19C20.1 9 21 8.1 21 7V9Z"/>
        </svg>
      </div>
    </div>

    <!-- 消息内容 -->
    <div class="chat-message__content">
      <!-- 发送者名称 -->
      <div class="chat-message__sender">
        {{ message.type === 'user' ? '我' : 'AI购物助手' }}
      </div>

      <!-- 消息气泡 -->
      <div class="chat-message__bubble">
        <!-- 文本消息 -->
        <div v-if="message.content" class="message-text" v-html="formatMessage(message.content)"></div>

        <!-- 商品推荐 -->
        <div v-if="message.products && message.products.length > 0" class="message-products">
          <div class="products-title">为您推荐以下商品：</div>
          <div class="products-list">
            <ProductRecommendCard
              v-for="product in message.products"
              :key="product.id"
              :product="product"
              @click="handleProductClick"
              @buy="handleBuyProduct"
            />
          </div>
        </div>

        <!-- 加载状态 -->
        <div v-if="message.loading" class="message-loading">
          <div class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span class="loading-text">AI正在思考中...</span>
        </div>
      </div>

      <!-- 时间戳 -->
      <div class="chat-message__time">
        {{ formatTime(message.timestamp) }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import ProductRecommendCard from './ProductRecommendCard.vue'

// 消息类型定义
export interface ProductItem {
  id: string
  name: string
  price: number
  originalPrice?: number
  image: string
  description?: string
  rating?: number
  sales?: number
}

export interface ChatMessage {
  id: string
  type: 'user' | 'bot'
  content?: string
  products?: ProductItem[]
  timestamp: number
  loading?: boolean
}

// Props
interface Props {
  message: ChatMessage
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  productClick: [product: ProductItem]
  buyProduct: [product: ProductItem]
}>()

// 计算属性
const messageClass = computed(() => ({
  'chat-message--user': props.message.type === 'user',
  'chat-message--bot': props.message.type === 'bot',
  'chat-message--loading': props.message.loading
}))

// 方法
function formatMessage(content: string): string {
  // 简单的文本格式化，支持换行
  return content.replace(/\n/g, '<br>')
}

function formatTime(timestamp: number): string {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (date.toDateString() === now.toDateString()) { // 今天
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else {
    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
  }
}

function handleProductClick(product: ProductItem): void {
  emit('productClick', product)
}

function handleBuyProduct(product: ProductItem): void {
  emit('buyProduct', product)
}
</script>

<style scoped>
.chat-message {
  display: flex;
  margin-bottom: 16px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-message--user {
  flex-direction: row-reverse;
}

.chat-message--user .chat-message__content {
  align-items: flex-end;
}

.chat-message--user .chat-message__bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.chat-message--bot .chat-message__bubble {
  background: #f5f5f5;
  color: #333;
}

.chat-message__avatar {
  flex-shrink: 0;
  margin: 0 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.avatar--user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.avatar--bot {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.avatar svg {
  width: 20px;
  height: 20px;
}

.chat-message__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.chat-message__sender {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
  padding: 0 4px;
}

.chat-message--user .chat-message__sender {
  text-align: right;
}

.chat-message__bubble {
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-message--user .chat-message__bubble {
  border-bottom-right-radius: 6px;
}

.chat-message--bot .chat-message__bubble {
  border-bottom-left-radius: 6px;
}

.message-text {
  line-height: 1.5;
  font-size: 14px;
}

.message-products {
  margin-top: 8px;
}

.products-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #666;
}

.chat-message--user .products-title {
  color: rgba(255, 255, 255, 0.9);
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  animation: loading 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-text {
  font-size: 12px;
  color: #999;
}

.chat-message__time {
  font-size: 11px;
  color: #999;
  margin-top: 4px;
  padding: 0 4px;
}

.chat-message--user .chat-message__time {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-message__content {
    max-width: 85%;
  }
  
  .avatar {
    width: 36px;
    height: 36px;
  }
  
  .avatar svg {
    width: 18px;
    height: 18px;
  }
  
  .chat-message__avatar {
    margin: 0 8px;
  }
  
  .chat-message__bubble {
    padding: 10px 14px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .chat-message--bot .chat-message__bubble {
    background: #2a2a2a;
    color: #e0e0e0;
  }
  
  .products-title {
    color: #b0b0b0;
  }
  
  .chat-message__sender {
    color: #888;
  }
  
  .chat-message__time {
    color: #888;
  }
}
</style>